<template>
    <view class="goods-item">
        <view class="img-box">
            <image class="image" :src="item.pic + '_300x300.jpg'" :lazy-load="true" @load="finishLoad"></image>
            <!-- 加载动效 -->
            <view class="loading" v-if="loading">
                <view class="load-item pink"></view>
                <view class="load-item red"></view>
                <view class="load-item orange"></view>
                <view class="load-item yellow"></view>
            </view>
            <!-- 已抢完 -->
            <view class="mask" v-if="item.timeStatus == 1 && type !== 'record' && (item.receiveStatus == 1 || item.receiveStatus == 2 || item.receiveStatus == 3) && item.hasBuy == 0">
                <view class="circular-wrap">
                    <view class="circular-inner">已抢完</view>
                </view>
            </view>
            <view class="sale-ok" v-if="item.timeStatus == 1 && item.hasBuy == 1 && type !== 'record'">
                该商品今日已抢
            </view>
        </view>
		<view class="goods-content">
			<view class="goods-name">{{ item.title }}</view>
			<view class="coupon-tlj">
				<view class="coupon">
					<image class="icon-coupon" src="@/static/images/icon/coupon-icon.png"></image>
					<view class="name">券</view>
					¥{{item.couponMoney}}
				</view>
				<view class="tlj">
					<image class="icon-tlj" src="@/static/images/icon/tlj-icon.png"></image>
					<view class="name">淘礼金</view>
					¥{{item.tljMoney}}
				</view>
			</view>
			<view class="price">
				<view class="end-price">到手价<text class="text">
				¥{{
				        (item.endPrice -
				            Number(item.mdMoney ? item.mdMoney : 0) -
				            Number(item.tljMoney ? item.tljMoney : 0)).toFixed(2)
				    }}</text></view>
				<view class="old-price">¥{{ item.price }}</view>
			</view>
			<view class="goods-sale" v-if="type !== 'record'">
				<progress :percent="(item.total-item.surplus) / item.total * 100" stroke-width="8" activeColor="#F70114" backgroundColor="#EBEBEB"/>
				<view class="sale">已抢{{ item.total - item.surplus }}件</view>
			</view>
			<block v-if="item.timeStatus === 0 && item.hasBuy !== 1">
				<view class="buy-btn disabled" v-if="item.timeStatus === 0">即将开始</view>
				<view class="buy-btn" v-if="item.timeStatus === 1" @tap="buyProduct">疯抢中</view>
				<view class="buy-btn disabled" v-if="item.timeStatus === 2">已结束</view>
			</block>
			<block v-if="item.timeStatus === 1 && item.hasBuy !== 1">
				<view class="buy-btn" v-if="item.receiveStatus === 0" @tap="buyProduct">立即抢</view>
				<view class="buy-btn disabled" v-if="item.receiveStatus === 1">已抢完</view>
				<view class="buy-btn disabled" v-if="item.receiveStatus === 2 || item.receiveStatus === 3">活动过期</view>
			</block>
			<view class="buy-btn" v-if="item.timeStatus === 1 && item.hasBuy === 1" @tap="buyProduct">立即抢</view>
			<view class="buy-btn disabled" v-if="item.timeStatus === 2">已结束</view>
		</view>
    </view>
</template>

<script>
export default {
    name: 'LimitItem',
    data() {
        return {
			loading: true,
			btnLock: false,
		};
    },
    props: {
        item: {
			type: Object,
			default: () => {
				return {};
			}
		},
		type: {
			type: String,
			default: () => {
				return 'default';
			}
		}
    },
    methods: {
		finishLoad() {
			this.loading = false;
		},
        buyProduct() {
			if (this.item.hasBuy === 1) {
				this.$emit('onCopySuccess', this.item.tkl);
			} else {
				uni.showLoading({
					title: '加载中...'
				});
				if (!this.btnLock) {
					this.btnLock = true;
					this.$service.million.tjtGoods
					   .flashBuy({
						   isBybt: true,
					       id: this.item.id
					   })
					   .then(res => {
							uni.showToast({
						   		title: '已抢到权益，请尽快购买',
						   		icon: 'none'
						   	});
							this.$emit('onCopySuccess', res, 'refresh');
						   	uni.hideLoading();
							this.btnLock = false;
					   })
					   .catch(err => {
						   this.$emit('onErrMessage', err.message);
						   uni.hideLoading();
						   this.btnLock = false;
					   });
				}
			}
        }
    }
};
</script>
<style lang="scss" scoped>
.goods-item {
    width: 710rpx;
    height: 320rpx;
    box-sizing: border-box;
    padding: 16rpx;
    border-radius: 16rpx;
    background: #fff;
	position: relative;
	margin: 0 auto;
	margin-top: 20rpx;
	@include flexBox(space-between, flex-start);
	.img-box {
		width: 284rpx;
		height: 284rpx;
		position: relative;
		margin-right: 18rpx;
		.image {
			position: absolute;
			width: 100%;
			height: 100%;
			overflow: hidden;
			border-radius: 16rpx;
		}
		.loading {
			position: absolute;
			width: 100%;
			height: 100%;
			@include flexBox(center);
			.load-item {
				width: 20rpx;
				height: 100rpx;
				margin: 0 10rpx;
				border-radius: 50rpx;
				&.pink {
					background: #fb889b;
					animation: pink 0.8s infinite;
				}
				&.red {
					background: #fb8888;
					animation: red 0.8s infinite;
				}
				&.orange {
					background: #fba488;
					animation: orange 0.8s infinite;
				}
				&.yellow {
					background: #fbc188;
					animation: yellow 0.8s infinite;
				}
			}
		}
		.mask {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 5;
			overflow: hidden;
			border-radius: 16rpx;
			background: rgba(0, 0, 0, 0.14);
			@include flexBox(center, center);
			.circular-wrap {
				width: 134rpx;
				height: 134rpx;
				border-radius: 50%;
				background: rgba(0, 0, 0, 0.3);
				transform: rotate(-24deg);
				@include flexBox(center, center);
				.circular-inner {
					width: 108rpx;
					height: 108rpx;
					border: 2rpx solid #fff;
					border-radius: 50%;
					font-size: 28rpx;
					color: #fff;
					@include flexBox(center, center);
				}
			}
		}
		.sale-ok {
		    width: 100%;
		    height: 60rpx;
		    line-height: 60rpx;
		    position: absolute;
		    left: 0;
		    bottom: 0;
		    font-size: 24rpx;
		    text-align: center;
		    color: #fff;
		    background: linear-gradient(360deg, rgba(88, 88, 88, 1) 0%, rgba(84, 84, 84, 0) 100%);
		    border-radius: 0rpx 0rpx 16rpx 16rpx;
		}
	}
	.goods-content {
		flex: 1;
		overflow: auto;
		.goods-name {
			font-size: 28rpx;
			color: #171717;
			@include ellipsis(2);
		}
	}
	.coupon-tlj {
		margin-top: 12rpx;
		font-size: 24rpx;
		@include flexBox(flex-start, center);
		.coupon {
			color: #FD3350;
			border: 2rpx solid #FD3350;
			position: relative;
			@include flexBox(center, center);
			padding-right: 10rpx;
			margin-right: 16rpx;
			border-radius: 4rpx;
			.icon-coupon {
				width: 40rpx;
				height: 32rpx;
				position: absolute;
				left: 0;
			}
			.name {
				width: 40rpx;
				text-align: center;
				position: relative;
				color: #fff;
				margin-right: 10rpx;
				margin-left: -2rpx;
			}
		}
		.tlj {
			color: #925114;
			border: 2rpx solid #FFDEA7;
			position: relative;
			padding-right: 10rpx;
			border-radius: 4rpx;
			@include flexBox(center, center);
			.icon-tlj {
				width: 80rpx;
				height: 32rpx;
				position: absolute;
				left: 0;
			}
			.name {
				width: 80rpx;
				text-align: center;
				position: relative;
				color: #925114;
				margin-right: 10rpx;
				margin-left: -2rpx;
			}
		}
	}
	.price {
		margin-top: 56rpx;
		@include flexBox(flex-start, center);
		.end-price {
			color: #FD3350;
			font-size: 28rpx;
			.text {
				font-weight: 600;
			}
		}
		.old-price {
			color: #B5B5B5;
			font-size: 24rpx;
			margin-left: 24rpx;
			text-decoration: line-through;
		}
	}
	.goods-sale {
		width: 196rpx;
		margin-top: 10rpx;
		.sale {
			color: #848484;
			font-size: 20rpx;
			margin-top: 10rpx;
		}
	}
	.buy-btn {
		background: #FD3350;
		padding: 10rpx 28rpx;
		border-radius: 50rpx 0 0 50rpx;
		color: #fff;
		width: fit-content;
		font-size: 28rpx;
		position: absolute;
		right: 0rpx;
		bottom: 16rpx;
		font-weight: 600;
		&.disabled {
			background: #EBEBEB;
			color: #999999;
		}
	}
}
@keyframes pink {
	0% {
		margin-top: -16rpx;
	}

	50% {
		margin-top: 16rpx;
	}

	100% {
		margin-top: -16rpx;
	}
}
@keyframes red {
	0% {
		margin-top: 16rpx;
	}

	50% {
		margin-top: -16rpx;
	}

	100% {
		margin-top: 16rpx;
	}
}
@keyframes orange {
	0% {
		margin-top: -16rpx;
	}

	50% {
		margin-top: 16rpx;
	}

	100% {
		margin-top: -16rpx;
	}
}
@keyframes yellow {
	0% {
		margin-top: 16rpx;
	}

	50% {
		margin-top: -16rpx;
	}

	100% {
		margin-top: 16rpx;
	}
}
</style>
